<template>
  <div>这是购物车页 - mutations</div>
  <p>count: {{ count }}</p>
  <button @click="addcount({ n: 2 })">btn2</button>
  <button @click="addcount({ n: 3 })">btn3</button>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  computed: {
    count() {
      return this.$store.state.a.count;
    },
  },
  methods: {
    // 将仓库的mutations的addcount函数，映射成为组件的methods的addcount函数
    ...mapMutations(["addcount"]),

    // fn(n) {
    // 在组件里面是不能直接修改仓库数据
    // 要改变仓库数据，唯一的做法是提交mutation
    // this.$store.commit("addcount", { n, name: "zhangsan" });
    // 等价于
    // this.$store.commit({
    //   type: "addcount", // type指的就是mutation的函数名称
    //   n,
    //   name: "zhangsan",
    // });
    //   this.addcount({ n, name: "zhangsan" });
    // },
  },
};
</script>
